<template>
  <u-popup
      :show="showPayPopup"
      :closeOnClickOverlay="true"
      mode="bottom"
      round="10"
      @close="handleClosePayPopup"
  >
    <view class="rela pay-popup">
      <u-gap height="15"></u-gap>
      <view class="flex col-center row-between p-l-30 p-r-30">
        <view style="opacity: 0">
          <u-icon name="close-circle" size="20"></u-icon>
        </view>
        <view class="text-center">确认支付</view>
        <view class="close-icon" @click="handleClosePayPopup">
          <u-icon name="close-circle" size="24"></u-icon>
        </view>
      </view>
      <view class="text-center m-t-40" style="color: red" v-if="customData.payType == 1">
        <text class="pingfang-heavy text-bold" style="font-size: 48rpx">{{formatPrice || "0.00"}}</text>
        <text class="font-26">易币</text>
      </view>
      <view class="text-center m-t-40" style="color: red" v-else>
        <text class="font-26">￥</text>
        <text class="pingfang-heavy text-bold" style="font-size: 48rpx">{{formatPrice || "0.00"}}</text>
      </view>
      <view class="text-center font-24 text-999">{{customData.payType == 1 ? '支付易币': '支付金额'}}</view>
      <view class="pay-cell border-bottom">
        <view class="pay-cell_lavel">支付方式</view>
        <view class="pay-cell_value">
          <text>{{customData.payType == 1 ? '易币支付': '微信支付'}}</text>
          <!--<view class="m-l-16">-->
          <!--  <u-icon name="arrow-right" size="10" color="#999999"></u-icon>-->
          <!--</view>-->
        </view>
      </view>
      <!--<view class="pay-cell" v-if="customData.payType == 1">-->
      <!--  <view class="pay-cell_lavel">优惠券</view>-->
      <!--  <view class="pay-cell_value" @click="isUseCoupon = !isUseCoupon">-->
      <!--    <text class="m-r-10 text-999 font-26">可抵扣80易币</text>-->
      <!--    <view class="not-check " v-if="!isUseCoupon"></view>-->
      <!--    <view class="check-icon " v-else>-->
      <!--      <image :src="$image('/images/check-icon.png')" mode="aspectFill"></image>-->
      <!--    </view>-->
      <!--  </view>-->
      <!--</view>-->
      <u-gap height="40"></u-gap>
      <view class="main-btn m-30">
        <u-button text="立即支付" color="#1F66FF" @click="handleConfirmBtn"></u-button>
      </view>
      <u-gap height="10"></u-gap>
    </view>
  </u-popup>
</template>
<script>
import {wxPay} from "@/common/pay";
export default {
  name: "e-pay-popup",
  data(){
    return {
      showPayPopup: false,
      payType: "2",
      isUseCoupon: false,
      orderItem:{},
      payWay: "",  // 支付方式,  order= 传入订单id,  liunian = 传入liunian
      customData: {}, // 自定义参数
    }
  },
  computed:{
    formatPrice(){
      let setting = uni.getStorageSync('setting') || "";
      if(setting){
        setting = JSON.parse(setting);
        let ratioVal = setting.find(item => item.key == "recharge_ratio").value;
        let liunian_amount = setting.find(item => item.key == "liunian_amount").value;
        let vip_amount = setting.find(item => item.key == "vip_amount").value;
        let total_amount = "0";
        if(this.customData.payType == "1"){ // 易币支付
          if(this.customData.payWay == "liunian"){
            // 如果是流年, 获取配置缓存中的流年费用计算
            total_amount = Number(liunian_amount / ratioVal).toFixed(2);
          }else if(this.customData.payWay == "order"){
            total_amount = Number(this.orderItem.pay_amount / ratioVal).toFixed(2);
          }else if(this.customData.payWay == "vip"){ // 如果是vip, 获取配置缓存中的流年费用计算
            total_amount = Number(vip_amount / ratioVal).toFixed(2);
          }
        }else{ // 微信支付
          // 微信支付,直接显示金额
          if(this.customData.payWay == "liunian"){
            total_amount = Number(liunian_amount).toFixed(2);
          }else if(this.customData.payWay == "order"){
            total_amount = Number(this.orderItem.pay_amount).toFixed(2);
          }else if(this.customData.payWay == "vip"){
            total_amount = Number(vip_amount).toFixed(2);
          }
        }
        console.log("最终支付金额", total_amount);
        return total_amount;
      }
    }
  },
  methods: {
    handleShowPayPopup(item,data){
      this.orderItem = item;
      this.customData = data;
      this.showPayPopup = true;
      console.log("查看支付弹窗参数", this.orderItem);
    },
    handleClosePayPopup(){
      this.showPayPopup = false;
    },
    // 确认支付
    async handleConfirmBtn(){
      let data = {};
      switch (this.customData.payWay){
        case "order": // 订单
          data = {
            order_id: this.orderItem.id,
          };
          break;
        case "liunian": // 流年
          data = {
            description: "liunian",
          };
          break;
        case "vip": // vip
          data = {
            description: "vip",
          };
          break;
      }
      if(this.customData.payType == "1"){
        const res = await this.$api.coin_pay(data);
        if(res.code == 1){
          this.showPayPopup = false;
          this.$emit("paySuccess", res.data);
        }
      }else{
        const res = await this.$api.create_payment(data);
        if(res.code == 1){
          this.showPayPopup = false;
          wxPay(res.data, result=>{
            if(result.code == 1){
              // this.$emit("refresh");
              // // 如果是充值订单
              // if(this.orderItem.type !== "recharge"){
              //   uni.navigateTo({
              //     url: "/pagesAugur/result/result"
              //   })
              // }
              this.$emit("paySuccess", {order_id: res.data.order_id});
            }
          })
        }
      }
    },
  },
}
</script>
<style scoped lang="scss">
.pay-popup{
  .close-icon{
  }
  .border-bottom{
    border-bottom: 1rpx solid #f1f1f1;
    padding-bottom: 30rpx;
  }
  .pay-cell{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx;
    color: #181818;
    .pay-cell_lavel{
      font-size: 28rpx;
    }
    .pay-cell_value{
      font-size: 28rpx;
      display: flex;
      align-items: center;
      .not-check{
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        border:1rpx solid #999999;
      }
      .check-icon{
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        image{
          height: 100%;
          width: 100%;
          display: block;
        }
      }
    }
  }
}
</style>